import React, { ReactElement, useState, useRef } from 'react';
import { Button, Tooltip, Tag, Space, Table, message, Popconfirm } from 'antd';
import {
  DownOutlined,
  QuestionCircleOutlined,
  EllipsisOutlined,
  DeleteOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { delServiceType, getServiceType } from '@/api/service-type';

interface Props {}

export default function index({}: Props): ReactElement {
  type Status = {
    color: string;
    text: string;
  };

  const columns = [
    {
      title: '名称',
      dataIndex: 'title',
    },
    {
      title: '平均价格',
      dataIndex: 'price',
      hideInSearch: true,
    },
    {
      title: '提供服务总数',
      dataIndex: 'total',
      hideInSearch: true,
    },
    {
      title: '消费数量',
      dataIndex: 'num',
      hideInSearch: true,
    },
    {
      title: '消费总价',
      dataIndex: 'all',
      hideInSearch: true,
    },
  ];

  const [record, setRecord] = useState({});
  const [visible, setVisible] = useState<boolean>(false);
  //打开抽屉
  const change = (item: any) => {
    // console.log(item, 'item');

    setRecord(item);
    setVisible(true);
  };

  //关闭抽屉
  const close = () => {
    setRecord({});
    setVisible(false);
  };
  const actionRef = useRef<ActionType>();
  const reload = () => {
    actionRef.current?.reload();
  };

  //批量删除
  const delServe = (val: any) => {
    // console.log(val.selectedRowKeys, 'id');
    for (let i = 0; i < val.selectedRowKeys.length; i++) {
      del(val.selectedRowKeys[i]);
    }
  };
  //删除
  const del = async (id: string) => {
    const res = await delServiceType(id);
    // console.log(res, 'res');
    if (res.status == 200) {
      message.success('删除成功');
      reload();
    } else {
      message.error('删除失败');
    }
  };
  function cancel(e: any) {
    // console.log(e);
    message.error('取消删除');
  }
  const confirm = (e: any) => {
    // console.log(e);
    del(e.id);
    // console.log(res);
    // message.success('删除成功');
  };
  return (
    <div>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}, sorter, filter) => {
          // 表单搜索项会从 params 传入，传递给后端接口。
          // console.log(params);
          const { title } = params;
          const res = await getServiceType({ name: title });
          const data = res.data.rows.children;
          console.log(data);

          return {
            data,
            success: true,
            total: res.data.total,
          };
        }}
        // rowKey=

        pagination={{
          showQuickJumper: true,
        }}
        // expandable={{ }}
        // search={false}
        dateFormatter="string"
        //表头
        options={false}
        // toolBarRender={() => [
        //   <Button key="show">查看日志</Button>,
        //   <Button key="out">
        //     导出数据
        //     <DownOutlined />
        //   </Button>,
        //   <Button key="primary" type="primary">
        //     创建应用
        //   </Button>,
        // ]}
      />
    </div>
  );
}
